<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI检索功能 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
        }
        .nav-item:hover {
            background-color: rgba(64, 158, 255, 0.1);
        }
        .active-nav {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
        }
        .chat-container {
            height: 500px;
            overflow-y: auto;
            scroll-behavior: smooth;
        }
        .user-message {
            background-color: #e6f7ff;
            border-radius: 0.75rem 0.75rem 0.1rem 0.75rem;
        }
        .ai-message {
            background-color: #f2f2f2;
            border-radius: 0.75rem 0.75rem 0.75rem 0.1rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <!-- 左侧logo -->
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/40x40?text=消防" alt="Logo" class="h-10 w-10">
                        <span class="ml-2 text-xl font-bold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    
                    <!-- 中间导航菜单 -->
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item active-nav px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-brain mr-1"></i> AI检索功能
                        </a>
                        <a href="report-generator.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-dashboard.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                    </nav>
                    
                    <!-- 右侧用户信息 -->
                    <div class="flex items-center space-x-4">
                        <a href="personal-center.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-user-circle"></i> 个人中心
                        </a>
                        <a href="login.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                        <a href="register.html" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主体内容区 -->
        <main class="container mx-auto px-4 py-6">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-gray-800">火调智能检索</h1>
                <p class="text-gray-600 mt-2">基于大模型的火灾调查知识检索与问答系统</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧工具栏 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">专业领域</h3>
                        <div class="space-y-2">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500" checked>
                                <span class="ml-2 text-sm">通用火调知识</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">电气火灾</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">化学品火灾</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">建筑火灾</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">车辆火灾</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="domain" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">法律法规</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">智能助手</h3>
                        <div class="space-y-2">
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-md">
                                <i class="fas fa-fire-extinguisher mr-1"></i> 火灾调查员
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-purple-50 hover:bg-purple-100 text-purple-600 rounded-md">
                                <i class="fas fa-microscope mr-1"></i> 物证分析专家
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-green-50 hover:bg-green-100 text-green-600 rounded-md">
                                <i class="fas fa-balance-scale mr-1"></i> 法律顾问
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-md">
                                <i class="fas fa-building mr-1"></i> 建筑安全专家
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h3 class="font-medium text-gray-800 mb-3">近期热门问题</h3>
                        <div class="space-y-2">
                            <a href="#" class="block p-2 text-sm hover:bg-gray-50 rounded-md text-gray-700">
                                <i class="fas fa-fire-alt text-red-500 mr-1"></i> 电气火灾的主要特征有哪些？
                            </a>
                            <a href="#" class="block p-2 text-sm hover:bg-gray-50 rounded-md text-gray-700">
                                <i class="fas fa-fire-alt text-red-500 mr-1"></i> 如何鉴别火灾中的纵火痕迹？
                            </a>
                            <a href="#" class="block p-2 text-sm hover:bg-gray-50 rounded-md text-gray-700">
                                <i class="fas fa-fire-alt text-red-500 mr-1"></i> 最新消防法规关于建筑疏散的规定
                            </a>
                            <a href="#" class="block p-2 text-sm hover:bg-gray-50 rounded-md text-gray-700">
                                <i class="fas fa-fire-alt text-red-500 mr-1"></i> 仓库易燃物存放的安全距离是多少？
                            </a>
                            <a href="#" class="block p-2 text-sm hover:bg-gray-50 rounded-md text-gray-700">
                                <i class="fas fa-fire-alt text-red-500 mr-1"></i> 化学品火灾现场如何安全取证？
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧主内容区 -->
                <div class="lg:col-span-3">
                    <!-- AI检索输入框 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <div class="flex items-start space-x-4">
                            <div class="flex-grow">
                                <textarea rows="3" placeholder="请输入您的问题，例如：电气火灾的主要特征有哪些？如何判断火灾是由电气故障引起的？..." 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                                <div class="flex justify-between items-center mt-2">
                                    <div class="flex space-x-2">
                                        <button class="text-gray-500 hover:text-blue-500 p-1" title="上传图片">
                                            <i class="fas fa-image"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-blue-500 p-1" title="上传文件">
                                            <i class="fas fa-file-upload"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-blue-500 p-1" title="语音输入">
                                            <i class="fas fa-microphone"></i>
                                        </button>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        支持多模态输入，可上传图片、文档等
                                    </div>
                                </div>
                            </div>
                            <button class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex-shrink-0 h-full">
                                <i class="fas fa-paper-plane mr-1"></i> 发送
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <div class="flex justify-between items-center mb-4">
                            <div class="flex items-center">
                                <span class="w-3 h-3 bg-green-500 rounded-full"></span>
                                <span class="ml-2 font-medium">火灾调查员助手</span>
                            </div>
                            <div class="flex space-x-2">
                                <button class="text-gray-500 hover:text-blue-500 p-1" title="清空对话">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                                <button class="text-gray-500 hover:text-blue-500 p-1" title="导出记录">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="text-gray-500 hover:text-blue-500 p-1" title="设置">
                                    <i class="fas fa-cog"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 聊天记录 -->
                        <div class="chat-container mb-4 px-2">
                            <!-- 系统消息 -->
                            <div class="flex mb-6">
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex-shrink-0 flex items-center justify-center">
                                    <i class="fas fa-robot text-blue-500"></i>
                                </div>
                                <div class="ml-3 max-w-[85%]">
                                    <div class="ai-message p-3">
                                        <p class="text-gray-800">您好！我是火灾调查智能助手，可以回答您关于火灾调查、消防安全等方面的问题。请问有什么可以帮助您的？</p>
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1 ml-2">今天 09:15</div>
                                </div>
                            </div>
                            
                            <!-- 用户消息 -->
                            <div class="flex justify-end mb-6">
                                <div class="mr-3 max-w-[85%]">
                                    <div class="user-message p-3">
                                        <p class="text-gray-800">电气火灾的主要特征有哪些？如何判断火灾是由电气故障引起的？</p>
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1 mr-2 text-right">今天 09:16</div>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center">
                                    <span class="text-white font-medium">用户</span>
                                </div>
                            </div>
                            
                            <!-- AI回复 -->
                            <div class="flex mb-6">
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex-shrink-0 flex items-center justify-center">
                                    <i class="fas fa-robot text-blue-500"></i>
                                </div>
                                <div class="ml-3 max-w-[85%]">
                                    <div class="ai-message p-3">
                                        <p class="text-gray-800 mb-3">电气火灾具有以下主要特征：</p>
                                        <ol class="list-decimal list-inside space-y-2 mb-3">
                                            <li>火灾起火点通常位于电气线路、开关、插座或电器设备周围</li>
                                            <li>起火点附近的导线绝缘层有熔化、碳化痕迹</li>
                                            <li>金属导体可能出现熔珠、熔痕或局部氧化变色</li>
                                            <li>火灾前可能有电器异常现象，如跳闸、电流波动、异味等</li>
                                            <li>火焰呈现特定颜色（如铜导线燃烧时呈绿色火焰）</li>
                                        </ol>
                                        
                                        <p class="text-gray-800 mb-3">判断火灾是由电气故障引起的主要方法：</p>
                                        <ol class="list-decimal list-inside space-y-2 mb-3">
                                            <li>检查导线痕迹：原发性短路痕迹与次生性短路痕迹的区别</li>
                                            <li>金相分析：检查导体熔断面的金相特征，区分是火灾引起的熔断还是短路引起的熔断</li>
                                            <li>控制电路检查：分析保险丝、断路器的状态</li>
                                            <li>电气设备检查：查看设备内部元件损坏情况，确定是内部故障还是外部火源</li>
                                            <li>痕迹分析：起火点周围的碳化形态往往呈"V"字形向上扩展</li>
                                        </ol>
                                        
                                        <div class="bg-yellow-50 p-3 rounded-md">
                                            <p class="text-sm text-yellow-800">
                                                <i class="fas fa-lightbulb mr-1"></i> <strong>专家提示：</strong> 在进行电气火灾调查时，应先排除其他可能的起火因素，同时要考虑电气火灾的多种形式，如短路、过载、接触不良、绝缘老化等。现场取样应遵循证据保护原则，避免二次破坏。
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1 ml-2">今天 09:17</div>
                                    
                                    <!-- 参考来源 -->
                                    <div class="mt-2 bg-gray-50 rounded-md p-2">
                                        <div class="text-xs text-gray-500 mb-1">参考来源：</div>
                                        <div class="text-xs space-y-1">
                                            <a href="#" class="text-blue-500 hover:text-blue-700 block">
                                                1. 《电气火灾调查指南》(2022版) - 应急管理部消防救援局
                                            </a>
                                            <a href="#" class="text-blue-500 hover:text-blue-700 block">
                                                2. 《建筑电气火灾成因分析与案例》- 张明 等
                                            </a>
                                            <a href="#" class="text-blue-500 hover:text-blue-700 block">
                                                3. 《火灾调查技术标准》GB/T 33200-2016
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 相关问题推荐 -->
                            <div class="mb-6 ml-13">
                                <div class="text-sm text-gray-600 mb-2">您可能还想了解：</div>
                                <div class="flex flex-wrap gap-2">
                                    <button class="px-3 py-1 bg-gray-100 hover:bg-blue-50 text-gray-700 text-sm rounded-full">
                                        电气火灾常见的预防措施
                                    </button>
                                    <button class="px-3 py-1 bg-gray-100 hover:bg-blue-50 text-gray-700 text-sm rounded-full">
                                        短路和过载的区别
                                    </button>
                                    <button class="px-3 py-1 bg-gray-100 hover:bg-blue-50 text-gray-700 text-sm rounded-full">
                                        电气火灾痕迹鉴定方法
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 输入区域 -->
                        <div class="border-t border-gray-200 pt-4">
                            <div class="flex items-center">
                                <div class="relative flex-grow">
                                    <input type="text" placeholder="继续提问..." 
                                        class="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
                                        <button class="text-gray-400 hover:text-gray-600 p-1">
                                            <i class="fas fa-image"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 p-1">
                                            <i class="fas fa-microphone"></i>
                                        </button>
                                    </div>
                                </div>
                                <button class="ml-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部版权信息 -->
        <footer class="bg-gray-800 text-white py-6 mt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <img src="https://via.placeholder.com/120x40?text=火调知识库" alt="Logo" class="h-10">
                        <p class="mt-2 text-gray-400">© 2023 火灾调查知识库平台 版权所有</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fas fa-envelope text-xl"></i>
                        </a>
                    </div>
                    <div class="mt-4 md:mt-0 text-gray-400">
                        <p>联系电话: 010-12345678</p>
                        <p>邮箱: contact@firekb.com</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-700 text-center text-gray-400">
                    <p>消防部门指定火灾调查技术服务平台</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue应用
        const app = Vue.createApp({
            data() {
                return {
                    // 数据可以在这里定义
                }
            },
            methods: {
                // 方法可以在这里定义
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 